<template>
  <!-- 缴费模块 -->
  <div class="Paycost content-box">
    <el-card style="background-color: #f2f2f2">
      <div class="payalls">
<!--        <div class="left">-->
<!--          订单编号： <span style="color: #409eff">{{oderId}}</span>-->
<!--          <span class="many">-->
<!--            订单状态:-->
<!--            <i class="gent">未支付</i>-->
<!--          </span>-->
<!--        </div>-->
        <div class="right">订单金额(元):<span>{{ allMoney }}</span></div>
      </div>
    </el-card>
<!-- 水费 -->
    <div class="elscop" v-if="waterList.length>0">
      <el-collapse v-model="activeNames1">
        <el-collapse-item name="1">
          <template slot="title">
            <div class="title">
              <div class="left">
                <span>水费</span>
              </div>
              <div class="right">
                合计金额：
                <span>{{ waterMoney.toFixed(2) }}元</span>
              </div>
            </div>
          </template>
          <el-table
            fixed
            ref="multipleTable"
            :data="waterList"
            tooltip-effect="dark"
            style="width: 100%"
            :toggleAllSelection="false"
            :header-cell-style="{ fontSize: '14px', backgroundColor: '#eee', fontWeight: '600' }"
          >
            <el-table-column prop="payCost" label="应缴月份" width="120">
              <!--   <template slot-scope="scope">{{ scope.row.date }}</template> -->
            </el-table-column>
            <el-table-column prop="buildingType" label="房屋类型" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.buildingType == 'complex_building'">综合楼</span>
                <span v-else>形象店</span>
              </template>
            </el-table-column>
            <el-table-column prop="ctContractProject" label="房屋编号" show-overflow-tooltip></el-table-column>
            <el-table-column prop="projectArea" label="面积(㎡)" width="100"></el-table-column>
            <el-table-column prop="privateElectricStartPoint" label="上期读数" show-overflow-tooltip></el-table-column>
            <el-table-column prop="privateElectricEndPoint" label="本期读书" width="100"></el-table-column>
            <el-table-column prop="waterTotalPoint" label="本月用量" show-overflow-tooltip></el-table-column>
            <el-table-column prop="costUnit" label="单价(元)" width="100"></el-table-column>
            <el-table-column prop="privateWaterMoney" label="费用(元)" show-overflow-tooltip></el-table-column>
            <el-table-column prop="publicWaterUnit" label="公摊单价(元)" width="100"></el-table-column>
            <el-table-column prop="publicWaterMoney" label="公摊费用(元)" show-overflow-tooltip></el-table-column>
            <el-table-column prop="monthFee" label="小计(元)" show-overflow-tooltip></el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>
<!-- 电费 -->
    <div class="elscop" v-if="eleList.length>0">
      <!-- mycost 电费水费数据 -->
      <el-collapse v-model="activeNames2">
        <el-collapse-item name="1">
          <template slot="title">
            <div class="title">
              <div class="left">
                <span>电费</span>
              </div>
              <div class="right">
                合计金额：
                <span>{{ eleMoney }}元</span>
              </div>
            </div>
          </template>
          <el-table
            fixed
            ref="multipleTable"
            :data="eleList"
            tooltip-effect="dark"
            style="width: 100%"
            :toggleAllSelection="false"
            :header-cell-style="{ fontSize: '14px', backgroundColor: '#eee', fontWeight: '600' }"
          >
            <el-table-column prop="payCost" label="应缴月份" width="120">
              <!--  <template slot-scope="scope">{{ scope.row.date }}</template> -->
            </el-table-column>
            <el-table-column prop="buildingType" label="房屋类型" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.buildingType == 'complex_building'">综合楼</span>
                <span v-else>形象店</span>
              </template>
            </el-table-column>
            <el-table-column prop="ctContractProject" label="房屋编号" show-overflow-tooltip></el-table-column>
            <el-table-column prop="projectArea" label="面积(㎡)" width="100"></el-table-column>
            <el-table-column prop="privateElectricStartPoint" label="上期读数" show-overflow-tooltip></el-table-column>
            <el-table-column prop="privateElectricEndPoint" label="本期读书" width="100"></el-table-column>
            <el-table-column prop="electricTotalPoint" label="本月用量" show-overflow-tooltip></el-table-column>
            <el-table-column prop="costUnit" label="单价(元)" width="100"></el-table-column>
            <el-table-column prop="privateElectricMoney" label="费用(元)" show-overflow-tooltip></el-table-column>
            <el-table-column prop="publicElectricUnit" label="公摊单价(元)" width="100"></el-table-column>
            <el-table-column prop="publicElectricMoney" label="公摊费用(元)" show-overflow-tooltip></el-table-column>
            <el-table-column prop="monthFee" label="小计(元)" show-overflow-tooltip></el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>
<!-- 管理费和租赁费 -->
    <div class="elscop" v-if="ctList.length>0">
      <el-collapse v-model="activeNames3">
        <el-collapse-item name="1">
          <template slot="title">
            <div class="title">
              <div class="left">
                <span>管理费和租赁费</span>
              </div>
              <div class="right">
                合计金额：
                <span>{{ ctMoney }}元</span>
              </div>
            </div>
          </template>
          <el-table
            fixed
            ref="multipleTable"
            :data="ctList"
            tooltip-effect="dark"
            style="width: 100%"
            :toggleAllSelection="false"
            :header-cell-style="{ fontSize: '14px', backgroundColor: '#eee', fontWeight: '600' }"
          >
            <el-table-column prop="payCost" label="应缴月份" width="120">
              <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
            </el-table-column>
            <el-table-column prop="buildingType" label="房屋类型" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.buildingType == 'complex_building'">综合楼</span>
                <span v-else>形象店</span>
              </template>
            </el-table-column>
            <el-table-column prop="projectNumber" label="房产编号" show-overflow-tooltip></el-table-column>
            <el-table-column prop="projectArea" label="面积(㎡)" width="100"></el-table-column>
            <el-table-column prop="projectUnitPrice" label="单价(元)" show-overflow-tooltip></el-table-column>
            <el-table-column prop="rentTaxRate" label="税率" width="100"></el-table-column>
            <el-table-column prop="startTime" label="收费期间" show-overflow-tooltip></el-table-column>
            <!-- 数据没有 -->
            <el-table-column prop="totalAmount" label="小计(元)" width="100"></el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>
<!-- 停车费 -->
    <div class="elscop" v-if="carList.length>0">
      <el-collapse v-model="activeNames4">
        <el-collapse-item name="1">
          <template slot="title">
            <div class="title">
              <div class="left">
                <span>停车费</span>
              </div>
              <div class="right">
                合计金额：
                <span>{{ carMoney }}元</span>
              </div>
            </div>
          </template>
          <el-table
            fixed
            :data="carList"
            ref="multipleTable"
            tooltip-effect="dark"
            style="width: 100%"
            :toggleAllSelection="false"
            :header-cell-style="{ fontSize: '14px', backgroundColor: '#eee', fontWeight: '600' }"
          >
            <el-table-column prop="payCost" label="应缴月份">
              <!--  <template slot-scope="scope">{{ scope.row.date }}</template> -->
            </el-table-column>
            <el-table-column prop="carCount" label="计费车辆"></el-table-column>
            <el-table-column prop="totalCarCost" label="合计(元)" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="detial(scope.row)">查看明细</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>
<!-- 其他费用 -->
    <div class="elscop" v-if="cOtherList.length>0">
      <el-collapse v-model="activeNames5">
        <el-collapse-item name="1">
          <template slot="title">
            <div class="title">
              <div class="left">
                <span>其他费用</span>
              </div>
              <div class="right">
                合计金额：
                <span>{{ otherMoeny }}元</span>
              </div>
            </div>
          </template>
          <el-table
            fixed
            ref="multipleTable"
            :data="cOtherList"
            tooltip-effect="dark"
            style="width: 100%"
            :toggleAllSelection="false"
            :header-cell-style="{ fontSize: '14px', backgroundColor: '#eee', fontWeight: '600' }"
          >
            <el-table-column prop="chargeType" label="费用类型"></el-table-column>
            <el-table-column prop="contractId" label="房屋类型"></el-table-column>
            <el-table-column prop="createDate" label="房屋楼号/区域" show-overflow-tooltip></el-table-column>
            <el-table-column prop="invoiceHead" label="房屋编号" show-overflow-tooltip></el-table-column>
            <el-table-column prop="invoiceNumber" label="费用金额(元)" show-overflow-tooltip></el-table-column>
            <el-table-column prop="payCost" label="费用生成时间" show-overflow-tooltip></el-table-column>
            <el-table-column prop="projectArea" label="小计(元)" show-overflow-tooltip></el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>
<!--支付-->
    <div class="bottom">
      <div style="width: 100%" class="buttom">优惠活动：<span class="right">无</span></div>
      <div style="width: 100%" class="buttom">
        <span>支付方式：</span>
        <el-radio v-model="radio" label="1" style="margin-left: 10px">全款支付</el-radio>
        <el-radio v-model="radio" :disabled='true' label="2">分期支付</el-radio>
        <el-button type="text" :disabled='true' class="paydate">1024元×3期</el-button>
        <el-button type="text" :disabled='true' class="paydate">1024元×3期</el-button>
        <el-button type="text" :disabled='true' class="paydate">1024元×3期</el-button>
      </div>

      <div style="width: 100%; color: #dd253c; background-color: rgb(242, 242, 242)" class="buttom many">应付金额：<span class="right" style="font-size: 20px">{{ allMoney }}</span></div>
      <div class="buttons" style="margin: 30px 20px 30px 90%"><el-button @click='confimPay' type="danger" class="right">确认提交</el-button></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表格数据
      radio: '1', //付款种类选项
      All: {  },
      activeNames1: '',
      activeNames2: '',
      activeNames3: '',
      activeNames4: '',
      activeNames5: '',
      allMoney:"0",
      companyId:'',
      //以下为上个页面传过来的数据
      waterList:[],
      eleList:[],
      ctList:[],
      cOtherList:[],
      carList:[],

      waterIds:[],
      electricIds:[],
      ctCostIds:[],
      cotherCostIds:[],
      carCostIds:[],

      waterMoney:0,
      eleMoney:0,
      ctMoney:0,
      carMoney:0,
      otherMoeny:0
    }
  },
  created() {
    const USER_INFO = JSON.parse(window.localStorage.getItem('USER_INFO'));
    this.companyId = USER_INFO.data.data.companyId
    this.waterList=this.$route.query.waterList
    this.eleList=this.$route.query.eleList
    this.ctList=this.$route.query.ctList
    this.cOtherList=this.$route.query.cOtherList
    this.carList=this.$route.query.carList
    this.allMoney=this.$route.query.allMoney
    console.log(this.eleList)
    this.waterList.map(item=>{
      this.waterIds.push(item.id)
      this.waterMoney+=item.monthFee
    })
    this.eleList.map(item=>{
      this.electricIds.push(item.id)
      this.eleMoney+=item.monthFee
    })
    this.ctList.map(item=>{
      this.ctCostIds.push(item.id)
      this.ctMoney+=item.totalAmount
    })
    this.cOtherList.map(item=>{
      this.cotherCostIds.push(item.id)
      this.otherMoeny+=item.totalAmount
    })
    this.carList.map(item=>{
      this.carCostIds.push(item.carCostIds)
      this.carMoney+=item.totalAmount
    })
  },
  methods: {
    //确认支付
    confimPay(){
      let data={
        companyId:this.companyId,		  //Integer  	公司ID  			必填项
        payCost:'',			  //String	    应缴月份			必填项
        waterIds:this.waterIds.toString(), 		//String[]	水费Ids			选填项（5项费用至少传1项）
        electricIds:this.electricIds.toString(), 	         //String[]	电费Ids			选填项（5项费用至少传1项）
        ctCostIds:this.ctCostIds.toString(),		          //String[]	租赁和管理费用Ids	选填项（5项费用至少传1项）
        cotherCostIds:this.cotherCostIds.toString(),	        //String[]	其他费用ids		选填项（5项费用至少传1项）
        carCostIds:this.carCostIds.toString()		         //String[]	停车费ids		选填项（5项费用至少传1项）
      }
      this.$http.get('/payments/paymentscost/payCost', { params:data }).then(res=>{
        console.log(res)
        if(res.data.code===0){
          this.$router.push({
            path:'/parkService/payInfo',
            query:{
              orderId: res.data.data.orderNumber,
              money:res.data.data.totalAmount
            }
          })
        }
      })
      // this.$store.state.orderTime=new Date()
      // this.$router.push({
      //   path:'/parkService/payInfo',
      //   query:{
      //     // orderId: this.oderId,
      //     // allMoney:this.allMoney
      //   }
      // })
    },
    //弹窗
    detial(row) {
      console.log(row)
      this.dialogTableVisible = true
      console.log(row)
      //this.gridData = row // 弹窗的数据
    },
  },
}
</script>

<style scoped lang="less">
@import './orderlist.less';
</style>
